
body{
    background-color: #FFFFFF;
}
/*************************************************************/
/* 设置顶部导航条的样式 */
.topLeadBox{
    /* width: 1903px; */
    height: 40px;
    background-color: #333333;
}
/* 设置顶部导航条中所有超链接的样式 */
.topLeadBox a{
    font-size: 12px;
    color: #b0b0b0;
    display: block;
}
/* 设置鼠标移入超链接时的颜色变化 */
.topLeadBox a:hover{
    color: #fff;
}
/* 设置顶部导航条的整体布局 */
.topLead{
    width:1226px;
    height:40px;
    line-height: 40px;
    margin: 0 auto;
}
/* 设置顶部导航条中功能的位置 */
.tpLdFunction li{
    float: left;
}
/* 设置顶部导航条中服务和购物车的位置 */
.tpLdService li,.shopCar{
    float: right;
}
/* 设置下载app中内容的样式 */
.downloadAppCt{
    /* 隐藏内容 */
    height: 0;
    /* 裁剪溢出内容 */
    overflow: hidden;
    /* 设置内容显示的过渡效果，让二维码缓缓显示出来*/
    transition: height 0.3s;
    /* 开启绝对定位并设计元素层级 */
    position: absolute;
    z-index: 99;
    margin-left: -35px;
    width: 126px;
    /* 设置文本居中 */
    text-align: center;
    background-color:#FFFFFF;
    /* 设置边框的阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* 设置下载app中隐藏的二维码 */
.downloadImg img{
    width: 86px;
    height: 86px;
    margin-top: 22px;
}
/* 设置下载app中隐藏文字的样式 */
.downloadAppCt span{
    display: block;
    font-size: 14px;
    color: black;
}
/* 设置鼠标移动到下载app时的字体颜色 */
.downloadApp:hover .downloadA{
    color: #FFFFFF;
}
/* 设置鼠标移动到下载app时让内容显示出来 */
.downloadApp:hover .downloadAppCt{
    /* 让内容显示 */
    height: 150px;
}
/* 设置鼠标移动到下载app时让小三角显示出来 */
.downloadApp:hover .triangle{
    /* 让内容显示 */
    display: block;
}
/* 设置小三角形的样式 */
.triangle{
    /* 隐藏小三角 */
    display: none;
    position: relative;
    /* 开启相对定位 */
    top: -8px;
    left: 15px;
    width: 0;
    height:0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color:#FFFFFF;
}
/* 设置购物车的布局 */
.shopCar{
    width: 120px;
    height: 40px;
    text-align: center;
    margin-left: 25px;
    background-color: #424242;
}
/* 设置购物车里面的内容 */
.shopCarCt{
    /* 隐藏内容 */
    display: none;
    /* 开启绝对定位并设置元素层级 */
    position: absolute;
    z-index: 99;
    margin-left: -196px;
    width: 316px;
    height: 100px;
    font-size: 11px;
    color: #333333;
    background-color:#FFFFFF;
    /* 设置边框的阴影 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 100px;
    /* 设置元素层级 */
}
/* 设置鼠标移入购物车时让内容显示出来 */
.shopCar:hover .shopCarCt{
    display: block;
}
/* 设置鼠标移入购物车时的背景颜色 */
.shopCar:hover{
    background-color: #FFFFFF;
}
/* 设置鼠标移入购物车时内容的颜色 */
.shopCar:hover .fa-cart-plus{
    color: #FF6A00;
}
/* 设置竖条的样式 */
.line{
    font-size: 16px;
    color:#424242;
    margin: 0 6.5px;
}



/*************************************************************/
/* 设置头部导航条的样式 */
.headLeadBox{
    /* 开启相对定位 */
    position: relative;
    position: absolute;
    width: 100%;
    height: 100px;
    background-color:#FFFFFF;
}
/* 设置头部导航条的整体布局 */
.headLead{
    width:1226px;
    height: 100px;
    margin: 0 auto;
    /* background-color: skyblue; */
}
/* 设置小米盒子的布局 */
.logo{
    float: left;
    width: 55px;
    height: 100px;
}
/* 设置头部导航条中小米图标的样式 */
.logoMi{
    float: left;
    display: block;
    width: 56px;
    height: 56px;
    margin-top: 22px;
}
/* 设置点击小米图标之后的样式 */
.logoMi:active{
    width: 52px;
    height: 52px;
    margin-top: 24px;
    margin-left: 4px;
}

/* 设置头部导航条功能的布局 */
.hdLdFunction{
    float: left;
    width: 830px;
    height: 100px;
    /* 整体向右移动7个单元格 */
    margin-left: 7px;
}
/* 设置功能列表的布局 */
.hdLdFunction .nav{
    /* 将内容垂直居中 */
    line-height: 100px;
    /* 内容向左移动60px */
    padding-left: 55px;
}
/* 设置功能之间布局 */
.hdLdFunction li{
    float: left;
}
/* 设置链接的样式 */
.hdLdFunction .nav li a{
    /* 设置为块元素 */
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    /* 设置字体大小 */
    font-size: 16px;
}
/* 设置鼠标移入链接时的颜色变化 */
.hdLdFunction li a:hover{
    color: #FF6700;
}
/* 隐藏全部商品分类 */
.hdLdFunction .allGoods > a{
    /* 隐藏内容 */
    visibility: hidden;
}
/* 设置展示商品的下拉层 */
.hdLdFunction .showGoodsBox{
    /* 开启绝对定位 */
    position: absolute;
    /* 设置下拉层的位置 */
    top: 100px;
    left: 0;    
    height: 0;
    /* 设置过渡效果 */
    transition: height 0.3s;
    overflow: hidden;
    width: 100%;
    background-color: #FFFFFF;
    /* 设置元素层级 */
    z-index: 99;
}
/* 设置鼠标移动到showGoods类时，让商品下拉栏显示出来 */
.hdLdFunction .showGoods:hover~.showGoodsBox
{
    height: 230px;
    /* 设置边框的阴影 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);    
}
.hdLdFunction .showGoodsBox:hover{
    height: 230px;
    /* 设置边框的阴影 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);    
}
/* 给全部商品分类栏目设置相对定位 */
.hdLdFunction .allGoods{
    position: relative;
}
/* 设置左侧导航的布局 */
.hdLdFunction .leftLeadBox{
    /* 设置绝对定位，用于调整位置 */
    position: absolute;
    left: -118px;
    width: 236px;
    height: 462px;
    background-color: #A19F9F;
    /* 设置层级 */
    z-index: 88;
}
/* 设置左侧导航中内容的布局 */
.hdLdFunction .leftLead{
    /* 设置行距为一倍 */
    line-height: 1;
    width: 236px;
    height: 422px;
    /* 设置上下的距离 */
    margin: 20px 0;
}
/* 设置左侧导航中每块内容的布局 */
.hdLdFunction .leftLead li{
    width: 236px;
    height: 42px;
    background-color: #A19F9F;
    /* 内容垂直居中 */
    line-height: 42px;
}
/* 设置左侧导航中的右箭头的样式 */
.hdLdFunction .fa-angle-right{
    /* 开启相对定位，用于调整位置 */
    position: relative;
    top: -30px;
    left: -23px;
    /* 向右浮动 */
    float: right;
    /* 设置图标大小 */
    font-size: 20px;
    color: #DFDFDF;
}
/* 设置左侧导航中字体的样式 */
.hdLdFunction .leftLead li a{
    /* 设置为块元素 */
    display: block;
    /* 设置内边距 */
    padding-left: 31px;
    color: #FFFFFF;
    /* 设置字体大小 */
    font-size: 14px;
}
/* 设置鼠标移入导航条中内容时的背景颜色 */
.hdLdFunction .leftLead li:hover{
    background-color: #FF6700;
}

/* 设置整个搜索部分的布局 */
.headLead .hdLdSearch{
    /* 开启相对定位 */
    position: relative;
    float: left;
    width: 296px;
    height: 50px;
    /* 内容垂直居中 */
    line-height: 50px;
    margin: 26px 0 auto 38px;
}
/* 设置搜索框的样式 */
.headLead .hdLdSearch input{
    /* 设置为块元素 */
    display: block;
    height: 50px;
    width: 245px;  
    border: #E0E0E0 1px solid;
    /* 设置输入搜索框中字体的大小 */
    font-size: 14px;
    /* 设置字体的位置 */
    padding: 0 10px;
    /* 除去轮框线 */
    outline: none;
}
/* 设置搜索字体的样式 */
.headLead .fa-search{
    /* 设置为块元素 */
    display: block;
    float: right;
    width: 50px;
    height: 48px;
    /* 设置位置 */
    margin-top: -76px;
    margin-left: 244px;
    /* 设置放大镜的大小 */
    font-size: 17px;
    color: #616161;
    /* 内容水平居中 */
    text-align: center;
    /* 内容垂直居中 */
    line-height: 50px;
    border: #E0E0E0 1px solid;
}
/* 设置点击搜索框时的边框颜色 */
.headLead .hdLdSearch input:focus{
    border: #FF6700 1px solid;
}
.headLead .hdLdSearch input:focus ~button .fa-search{
    border: #FF6700 1px solid;
}
/* 设置点击搜索框时，让内容显示出来 */
.headLead .hdLdSearch input:focus ~.SearchCt{
    display: block;
}
/* 设置鼠标移入搜索框字体图标的颜色和背景颜色 */
.headLead .fa-search:hover{
    color: #FFFFFF;
    background-color: #FF6700;
}

/* 设置隐藏内容的布局 */
.headLead .hdLdSearch .SearchCt{
    /* 开启绝对定位 */
    position: absolute;
    /* 调整整个隐藏内容的位置 */
    left: 0;
    top: 49px;
    /* 隐藏内容 */
    display: none;
    float: left;
    /* margin-top: -51px; */
    width: 243px;
    height: 240px;
    border: #FF6700 1px solid;
    /* 设置层级 */
    z-index: 10;
    background-color: #FFFFFF;
}
/* 设置隐藏内容中的每一小块的布局 */
.hdLdSearch .SearchCt ul li{
    width: 100%;
    height: 30px;
    /* 内容垂直居中 */
    line-height: 30px;
}
/* 设置隐藏内容中超链接的样式 */
.hdLdSearch .SearchCt ul li a{
    /* 设置为块元素 */
    display: block;
    width: 100%;
    height: 100%;
}
/* 设置隐藏内容中的字体样式 */
.hdLdSearch .SearchCt ul li a span{
    /* 设置为块元素 */
    display: block;
    width: 227px;
    height: 100%;
    /* 文字向右移动 */
    margin-left: 16px;
    /* 设置字体大小 */
    font-size: 8px;
}
/* 设置鼠标移入隐藏内容时的背景颜色 */
.hdLdSearch .SearchCt ul li:hover{
    background-color: #FAFAFA;
}


/*************************************************************/
/* 设置中间部分的内容 */
/* 设置banner的容器 */
.banner-wrapper{
    /* 开启相对定位 */
    position: relative;
    width: 1226px;
    height: 462px;
    margin: 100px auto;
    background-color: #bfa;
    z-index: 8;
}
/* 设置图片的样式 */
.banner-wrapper .img-list img{
    /* 开启绝对定位 */
    position: absolute;
    width: 1226px;
    height: 462px;
}
/* 设置点的布局 */
.banner-wrapper .point-list{
    /* 开启绝对定位 */
    position: absolute;
    /* 调整位置 */
    right: 26px;
    bottom: 26px;
}
/* 设置点的样式 */
.banner-wrapper .point{
    width: 6px;
    height: 6px;
    /* 设置向左浮动 */
    float: left;
    /* 设置右边距 */
    margin-right: 8px;
    /* 设置边框 */
    border: 2px solid #B3B3B3;
    /* 将块元素变为圆形 */
    border-radius: 50%;
}
/* 设置点中的超链接样式 */
.banner-wrapper .point a{
    /* 设置为块元素 */
    display: block;
    /* 让链接的大小为整个父元素大小 */
    width: 100%;
    height: 100%;
}
/* 设置第一个点的背景颜色 */
.banner-wrapper .first-point{
    background-color: #919191;
}
/* 设置鼠标移入第一个点时的背景颜色 */
.banner-wrapper .first-point:hover{
    background-color: #F8F8F8;
}
/* 设置箭头中的超链接 */
.banner-wrapper .arrow-wrapper a{
    /* 设置为块元素 */
    display: block;
    /* 设置超链接的范围 */
    width: 100%;
    height: 100%;
}
/* 设置箭头的布局 */
.banner-wrapper .arrow-wrapper div{
    width: 41px;
    height: 69px;
    /* 设置背景图片 */
    background-image: url("../img/banner-picture.png");
}
/* 设置左箭头的样式 */
.banner-wrapper .arrow-wrapper .left-arrrow{
    /* 开启绝对定位 */
    position: absolute;
    /* 设置位置 */
    left: 236px;
    top: 195px;
    /* 设置背景偏移量 */
    background-position-x: 83px;
}
/* 设置右箭头 */
.banner-wrapper .arrow-wrapper .right-arrrow{
    /* 开启相对定位 */
    position: absolute;
    /* 设置位置 */
    right: 0;
    top: 195px;
    /* 设置背景偏移量 */
    background-position-x: 207px;
}
/* 设置鼠标移入左箭头时的背景 */
.banner-wrapper .arrow-wrapper .left-arrrow:hover{
    background-position-x: 0;
}
/* 设置鼠标移入右箭头时的背景 */
.banner-wrapper .arrow-wrapper .right-arrrow:hover{
    background-position-x: 125px;
}

/* 设置右侧导航条的布局 */
.right-lead-wrapper{
    /* 开启固定定位 */
    position:fixed;
    width: 27px;
    height: 205px;
    bottom: 40px;
    /* 设置位置为视口的一半 */
    right: 50%;
    /* 设置右边距 */
    margin-right: -639px;
}
/* 设置右侧导航条中每一块的布局 */
.right-lead-wrapper ul li{
    position: relative;
    width:25px;
    height: 40px;
    /* 设置边框 */
    border-bottom: #F5F5F5 1px solid;
    border-left: #F5F5F5 1px solid;
    border-right: #F5F5F5 1px solid;
    /* 内容水平居中 */
    text-align: center;
    /* 内容垂直居中 */
    line-height: 40px;
    background-color: #FFFFFF;
    /* 设置层级 */
}

/* 单独设置右侧导航条中第一块的上边框 */
.right-lead-wrapper ul li:nth-child(1){
    border-top: #F5F5F5 1px solid;    
}
/* 设置右侧导航条中的字体图标 */
.right-lead-wrapper ul li a i{
    color:#ADADAD;
    /* 设置大小 */
    font-size: 17px;
}
/* 设置超链接a的布局 */
.right-lead-wrapper ul li a{
    display: block;
    width: 100%;
    height: 100%;
}
/* 设置鼠标移入右侧导航条时字体图标的颜色 */
.right-lead-wrapper ul li a:hover i{
    color: #FF9147;
}
/* 设置隐藏的内容的布局 */
.right-lead-wrapper .qr-code{
    /* 开启绝对定位 */
    position: absolute;
    /* 隐藏内容 */
    display: none;
    /* 设置容器大小 */
    width: 130px;
    height: 191px;
    background-color: #fff;
    /* 设置位置 */
    left: -145px;
    top: 0;
    /* 设置边框的阴影 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
/* 设置隐藏二维码的样式 */
.right-lead-wrapper .qr-code img{
    width: 96px;
    height: 96px;
    margin: 24px auto;
}
/* 设置隐藏文字的样式 */
.right-lead-wrapper .qr-code span{
    /* 设置为块元素 */
    display: block;
    width: 100%;
    height: 16px;
    color: #757575;
}
/* 设置第一句文字的布局 */
.right-lead-wrapper .qr-code .first-sentence{
    margin-top: -20px;
    margin-bottom: 5px;
}
/* 设置图标小三角形的样式 */
.right-lead-wrapper .fa-caret-right{
    /* 隐藏小三角 */
    display: none;
    /* 开启绝对定位 */
    position: absolute;
    /* 设置位置 */
    left: -15px;
    top: 10px;
    color: #FFFFFF;
    /* 设置小三角图标字体的大小 */
    font-size: 20px;
}
/* 设置鼠标移入手机图标时让小三角图标显示 */
.right-lead-wrapper .mobile:hover .fa-caret-right{
    display: block;
}
/* 设置鼠标移入手机图标时让隐藏二维码和文字显示出来 */
.right-lead-wrapper .mobile:hover .qr-code{
    display: block;
}
/* 设置个人中心，销售服务，人工客服的内容的布局 */
.right-lead-wrapper .personal-content,
.right-lead-wrapper .sell-service-content,
.right-lead-wrapper .manuals-service-content{
    /* 开启绝对定位 */
    position: absolute;
    /* 隐藏内容 */
    display: none;
    width: 75px;
    height: 30px;
    /* 设置位置 */
    left: -89px;
    top: 5px;
    /* 内容水平居中 */
    text-align: center;
    /* 内容垂直居中 */
    line-height: 30px;
    background-color: #fff;
}
/* 设置购物车中内容的布局 */
.right-lead-wrapper .shop-car-content{
    /* 开启绝对定位 */
    position: absolute;
    /* 隐藏内容 */
    display: none;
    width: 96px;
    height: 30px;
    /* 设置位置 */
    left: -110px;
    top: 5px;
    /* 内容水平居中 */
    text-align: center;
    /* 内容垂直居中 */
    line-height: 30px;
    background-color: #fff;    
}
/* 设置个人中心，销售服务，人工客服隐藏文字的样式 */
.right-lead-wrapper .personal-content span,
.right-lead-wrapper .sell-service-content span,
.right-lead-wrapper .manuals-service-content span,
.right-lead-wrapper .shop-car-content span{
    /* 设置为块元素 */
    display: block;
    width: 100%;
    height: 16px;
    color: #757575;
}
/* 设置鼠标移入个人中心，销售服务，人工客服，购物车图标时让小三角图标显示 */
.right-lead-wrapper .personal:hover .fa-caret-right,
.right-lead-wrapper .sell-service:hover .fa-caret-right,
.right-lead-wrapper .manuals-service:hover .fa-caret-right,
.right-lead-wrapper .shop-car:hover .fa-caret-right{
    display: block;
}
/* 设置鼠标移入个人中心，销售服务，人工客服,购物车图标时让文字显示出来 */
.right-lead-wrapper .personal:hover .personal-content,
.right-lead-wrapper .sell-service:hover .sell-service-content,
.right-lead-wrapper .manuals-service:hover .manuals-service-content,
.right-lead-wrapper .shop-car:hover:hover .shop-car-content{
    display: block;
}

/*************************************************************/
/* 设置广告一栏的布局 */
.ad-wrapper{
    height: 170px;
    background-color: #fff;
    /* 设置位置 */
    margin-top: -86px;
}
/* 设置广告中的服务的盒子 */
.ad-service-wrapper{
    width: 236px;
    height: 170px;
    float: left;
    background-color: #5F5750;
}
/* 设置广告中服务的布局 */
.ad-service{
    width: 228px;
    height: 246px;
    margin: 3px 4px;
}
/* 设置广告服务中每一块的样式 */
.ad-service li{
    /* 设置向左浮动 */
    float: left;
    width: 76px;
    height: 82px;
    /* 内容水平居中 */
    text-align: center;
    /* 内容垂直居中 */
    line-height: 82px;
}
/* 设置广告服务中的字体图标的样式 */
.ad-service li i{
    /* 设置为块元素 */
    display:block;
    width: 24px;
    height: 24px;
    margin: 18px auto 0;
    /* 设置字体图标的大小 */
    font-size: 22px;
    color: #CFCCCA;
}
/* 设置广告服务中的文字的样式 */
.ad-service li a{
    /* 设置为块元素 */
    display: block;
    width: 100%;
    height: 100%;
    margin-top: -29px;
    /* 设置字体大小 */
    font-size: 12px;
    /* 设置字体颜色 */
    color: #CFCCCA;
}
/* 设置鼠标移动到广告服务中时文字和字体图标的颜色 */
.ad-service li:hover a,
.ad-service li:hover i{
    color: #fff;
}
/* 设置上实线的样式 */
.ad-service li::before{
    /* 开启相对定位 */
    position: relative;
    content: '';
    /* 设置为块元素 */
    display: block;
    width: 65px;
    height: 1px;
    background-color: #665E57;
    /* 设置位置 */
    margin: 0 auto;
    top: 2px;
}
/* 设置下实线的样式 */
.ad-service li::after{
    /* 设置为相对定位 */
    position: relative;
    content: '';
    /* 设置为块元素 */
    display: block;
    width: 1px;
    height: 65px;
    background-color: #665E57;
    /* 设置位置 */
    margin: auto 0;
    left: 2px;
    top: -85px;
}
/* 设置每一块图片的布局 */
.ad-imgs li{
    /* 设置向左浮动 */
    float: left;
    width: 316px;
    height: 170px;
    background-color: #bfa;
    margin-left: 14px;
}
/* 设置每一块图片的样式 */
.ad-imgs li img{
    width: 316px;
    height: 170px;
}
/* 设置鼠标移动到图片时的图片阴影 */
.ad-imgs li:hover{
    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}



/*************************************************************/
/* 设置最底层图片的盒子 */
.bottom-ad-wrappr{
    height: 500px;
    background-color: #F5F5F5;
    margin-top: 26px;
}
/* 设置最底层图片的布局 */
.bottom-ad{
    width: 1226px;
    height: 94px;
    margin: 0 auto;
}
/* 设置图片的布局 */
.bottom-ad img{
    margin-top: 26px;
}